<template>
  <view class="test-page">
    <u-navbar title="DateTimePicker测试页面" :auto-back="true"></u-navbar>
    
    <view class="content">
      <view class="section">
        <view class="section-title">基础用法测试</view>
        
        <!-- 日期时间选择 -->
        <view class="form-item">
          <text class="label">预计完成时间</text>
          <DateTimePicker
            v-model="estimatedTime"
            title="选择预计完成时间"
            placeholder="请选择预计完成时间"
            @confirm="onTimeConfirm"
          />
        </view>
        
        <!-- 仅日期选择 -->
        <view class="form-item">
          <text class="label">选择日期</text>
          <DateTimePicker
            v-model="selectedDate"
            mode="date"
            title="选择日期"
            placeholder="请选择日期"
            display-format="YYYY-MM-DD"
          />
        </view>
        
        <!-- 仅时间选择 -->
        <view class="form-item">
          <text class="label">选择时间</text>
          <DateTimePicker
            v-model="selectedTime"
            mode="time"
            title="选择时间"
            placeholder="请选择时间"
            display-format="HH:mm"
          />
        </view>
        
        <!-- 年月选择 -->
        <view class="form-item">
          <text class="label">选择年月</text>
          <DateTimePicker
            v-model="selectedYearMonth"
            mode="year-month"
            title="选择年月"
            placeholder="请选择年月"
            display-format="YYYY-MM"
          />
        </view>
      </view>
      
      <view class="section">
        <view class="section-title">高级用法测试</view>
        
        <!-- 时间范围限制 -->
        <view class="form-item">
          <text class="label">预约时间（30天内）</text>
          <DateTimePicker
            v-model="appointmentTime"
            :min-date="minDate"
            :max-date="maxDate"
            title="选择预约时间"
            placeholder="请选择预约时间"
          />
        </view>
        
        <!-- 自定义格式 -->
        <view class="form-item">
          <text class="label">自定义格式</text>
          <DateTimePicker
            v-model="customTime"
            title="选择时间"
            placeholder="请选择时间"
            display-format="YYYY年MM月DD日 HH:mm"
          />
        </view>
        
        <!-- 禁用状态 -->
        <view class="form-item">
          <text class="label">禁用状态</text>
          <DateTimePicker
            v-model="disabledTime"
            :disabled="true"
            title="选择时间"
            placeholder="已禁用"
          />
        </view>
      </view>
      
      <view class="section">
        <view class="section-title">方法调用测试</view>
        
        <view class="form-item">
          <text class="label">方法调用</text>
          <DateTimePicker
            ref="timePickerRef"
            v-model="methodTestTime"
            title="选择时间"
            placeholder="请选择时间"
          />
        </view>
        
        <view class="button-group">
          <u-button @click="showPicker" type="primary" size="small">显示选择器</u-button>
          <u-button @click="hidePicker" type="info" size="small">隐藏选择器</u-button>
          <u-button @click="resetPicker" type="warning" size="small">重置选择</u-button>
        </view>
      </view>
      
      <view class="section">
        <view class="section-title">选择结果</view>
        
        <view class="result-item">
          <text class="result-label">预计完成时间：</text>
          <text class="result-value">{{ estimatedTime || '未选择' }}</text>
        </view>
        
        <view class="result-item">
          <text class="result-label">选择日期：</text>
          <text class="result-value">{{ selectedDate || '未选择' }}</text>
        </view>
        
        <view class="result-item">
          <text class="result-label">选择时间：</text>
          <text class="result-value">{{ selectedTime || '未选择' }}</text>
        </view>
        
        <view class="result-item">
          <text class="result-label">选择年月：</text>
          <text class="result-value">{{ selectedYearMonth || '未选择' }}</text>
        </view>
        
        <view class="result-item">
          <text class="result-label">预约时间：</text>
          <text class="result-value">{{ appointmentTime || '未选择' }}</text>
        </view>
        
        <view class="result-item">
          <text class="result-label">自定义格式：</text>
          <text class="result-value">{{ customTime || '未选择' }}</text>
        </view>
        
        <view class="result-item">
          <text class="result-label">方法测试：</text>
          <text class="result-value">{{ methodTestTime || '未选择' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * DateTimePicker组件测试页面
 * 
 * @author Wu.Liang
 * @date 2025-01-22
 * @version 1.0.0
 */

import { ref, computed } from 'vue'
import DateTimePicker from '@/components/common/DateTimePicker.vue'

// 页面标题
uni.setNavigationBarTitle({
  title: 'DateTimePicker测试'
})

// 响应式数据
const estimatedTime = ref('')
const selectedDate = ref('')
const selectedTime = ref('')
const selectedYearMonth = ref('')
const appointmentTime = ref('')
const customTime = ref('')
const disabledTime = ref('')
const methodTestTime = ref('')

// 组件引用
const timePickerRef = ref(null)

// 计算属性：时间范围
const minDate = computed(() => {
  return new Date().getTime()
})

const maxDate = computed(() => {
  const date = new Date()
  date.setDate(date.getDate() + 30)
  return date.getTime()
})

// 事件处理
const onTimeConfirm = (e) => {
  console.log('时间选择确认:', e)
  uni.showToast({
    title: `已选择：${e.formatted}`,
    icon: 'success',
    duration: 2000
  })
}

// 方法调用
const showPicker = () => {
  timePickerRef.value?.show()
}

const hidePicker = () => {
  timePickerRef.value?.hide()
}

const resetPicker = () => {
  timePickerRef.value?.reset()
  uni.showToast({
    title: '已重置选择',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.test-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.content {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.form-item {
  margin-bottom: 20px;
  
  .label {
    display: block;
    font-size: 16px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;
  }
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.result-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
  
  .result-label {
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
    min-width: 120px;
  }
  
  .result-value {
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    flex: 1;
  }
}

// 响应式设计
@media (max-width: 750px) {
  .content {
    padding: 15px;
  }
  
  .section {
    padding: 15px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .form-item .label {
    font-size: 15px;
  }
  
  .result-item {
    flex-direction: column;
    align-items: flex-start;
    
    .result-label {
      margin-bottom: 5px;
      min-width: auto;
    }
  }
}
</style>
